import React,{Component} from 'react';
import { Table, Button } from 'antd';
import {withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import {queryAllCompanyUser,queryRole,delEmploy} from '../../redux/company/company'
import AddUesrModel from './AddUesrModel'
import EditUesrModel from './EditUserModel'
@withRouter
@connect(
    state => state,
    { queryAllCompanyUser,queryRole,delEmploy}
)
export default class Employee extends Component{
    constructor(){
        super();
        this.state = {
            page:1,
            limit:10, 
            visible:false,
            visible1:false,
            userId:''
        }
    }
    onDelect(userId){
        console.log(userId)
         this.props.delEmploy(userId)
    }
    onEitd(userId){
        console.log(userId)
        this.setState({
            userId:userId,
            visible1:true
        })
        this.props.queryRole();
    }
    componentDidMount(){
        this.props.queryAllCompanyUser(this.state.page,this.state.limit)
    }
    showModel(){
        this.setState({
            visible:!this.state.visible
        })
    }
    showModel1(){
        this.setState({
            visible1:!this.state.visible1
        })
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.company.delEmploy){
            this.props.queryAllCompanyUser(this.state.page,this.state.limit)
            this.showModel()
        }else if(nextProps.company.editEmploy){
            this.props.queryAllCompanyUser(this.state.page,this.state.limit)
            this.showModel1()
        }
    }
    onUser(){
        this.setState({
            visible:true
        })
        this.props.queryRole();
    }
    render() {
     
       let employData = this.props.company.employData;
        const columns = [{
            title: '用户名',
            dataIndex: 'account',
            align:'center'
           
          }, {
            title: '手机号',
            dataIndex: 'phoneNum',
            align:'center'
          }, {
            title: '角色',
            dataIndex: 'roleName',
            align:'center'
          },{
              title: '操作',
              align:'center',
              width:300,
              render:(text, record, index)=>
                  <div style={{width:'300px'}}>
                  <Button onClick= {this.onEitd.bind(this,record.id)}>修改</Button>
                  <Button onClick= {this.onDelect.bind(this,record.id)} style={{marginLeft: 10,}}>删除</Button>
                  </div>
            }];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
          };
        return (
        <div style={{paddingBottom:20,paddingTop:20}}>
            <Button onClick = {this.onUser.bind(this)} >添加用户</Button>
            <div>
            <Table 
             columns={columns} 
             dataSource={JSON.stringify(employData) == '{}' ?'':employData} />
             </div>
             <AddUesrModel visible={this.state.visible} showModel={this.showModel.bind(this)}/>
             <EditUesrModel userId={this.state.userId} visible={this.state.visible1} showModel={this.showModel1.bind(this)}/>
             
        </div>
    )
    }
}